<template>
  <div class="wm1080px y wn jc">
    <top @topEvent="topEvent"></top>
    <template v-if="show == 0">
      <banner v-if="bannerData.length" :fdata="bannerData"></banner>
      <div class="y wn jc w1080px">
        <template v-if="data.length>1">
          <div
            style="margin: 10px 0px 0px 0px;"
            class="w1080px y wn"
            v-for="(item,i) in data"
            :key="i.id"
          >
            <template v-if=" item.id">
              <div class="header">{{item.name}}...{{item.info}}</div>
              <div class="wf x wn h400px">
                <template v-for=" (item2, j) in item.data">
                  <div class="aside w500px nbx pr sbss" :key="j" v-if="!j" @click="goItem(item2)">
                    <img
                      style="width: 100%; height: 100%; z-index: 9; object-fit:cover"
                      alt="加载失败"
                      :src="$api + item2.imgs[0].url"
                    />
                    <div class="info">
                      <div class="name">{{item2.name}}</div>
                      <div class="price">{{item2.price+item2.unit}}</div>
                    </div>
                  </div>
                </template>
                <div class="main1 wf x ww">
                  <template v-for=" (item2, j) in item.data">
                    <div
                      class="aside w280px ml10px pr sbss"
                      :key="j"
                      v-if="j"
                      @click="goItem(item2)"
                    >
                      <img
                        style="width: 100%; height: 100%; z-index: 9; object-fit:cover"
                        alt="加载失败"
                        :src="$api + item2.imgs[0].url"
                      />
                      <div class="info">
                        <div class="name">{{item2.name}}</div>
                        <div class="price">{{item2.price+item2.unit}}</div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </template>
        <template v-else>
          <div class="header">{{data.name}}...{{data.info}}</div>
          <div class="x ww wf">
            <div
              class="w340px h280px m10px oh aside sbss pr"
              v-for="(item,j) in data.data"
              :key="j"
              @click="goItem(item)"
            >
              <el-carousel :interval="rand(4200,5000)" indicator-position="outside">
                <el-carousel-item v-for="k in item.imgs" :key="k">
                  <img
                    style="width: 100%; height: 100%; z-index: 9; object-fit:cover"
                    alt="加载失败"
                    :src="$api + k"
                  />
                </el-carousel-item>
              </el-carousel>
              <div class="info">
                <div class="name">{{item.name}}</div>
                <div class="price">{{item.price+item.unit}}</div>
              </div>
            </div>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[pageSize, pageSize*2, pageSize*4, pageSize*8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </template>
      </div>
    </template>
    <items :fdata="client" :g4="g4" v-else />
    <footer1></footer1>
    <el-dialog title="搜索" :visible.sync="searchShow">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="搜索范围">
          <el-select v-model="form.itemType" placeholder="搜索所有内容">
            <el-option v-for="i in list" :key="i.ID" :label="i.name" :value="i.ID" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name" placeholder="请输入搜索内容(标题包含)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="searchShow = false">取 消</el-button>
        <el-button type="primary" @click="search('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import banner from "./admin/banner";
import top from "./top";
import footer1 from "./footer";
import items from "./admin/itemTour";
export default {
  components: { banner, top, items, footer1 },
  // props: [],
  data() {
    return {
      data: [],
      bannerData: {},
      show: 0,
      client: false,
      list: false,
      currentPage: 1,
      pageSize: 12,
      total: -1,
      g4: false,
      searchShow: false,
      form: { itemType: 0, name: "名称1" },
      rules: {
        name: [
          { required: true, message: "请输入搜索内容名称", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ]
      }
    };
  },
  // computed() {return{}},
  created() {
    if (!this.g4) {
      this.$axios
        .post("/q.php", {
          cmd: 1005,
          val: 0
        })
        .then(result => {
          this.g4 = result.data;
          // sessionStorage.setItem("g4", JSON.stringify(result.data));
        })
        .catch(err => {
          this.$message.error("发生错误!\n错误原因:" + err);
        });
    }

    this.getData({ cmd: 2001 });
  },
  methods: {
    rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    goItem(val) {
      // sessionStorage.setItem("item", JSON.stringify(val));
      // this.$router.push("/item");
      this.client = this.$cp(val);
      // console.log(this.$cp(this.client.imgs));
      this.show = 1;
    },
    topEvent(a) {
      this.show = 0;
      this.total = -1;
      if (a.substr(0, 1) == "/") {
        this.getData();
        this.$router.push(a);
      } else if (Number(a) == a)
        this.getData({ val: { itemType: a, weight: 1 } });
      else if (a == "search") {
        this.searchShow = true;
        // console.log(this.$cp(this.list));
      }
    },
    search(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const d = {
            cmd: 0,
            val: {
              table: "items",
              name: "like %" + this.form.name + "%",
              weight: 1
            }
          };
          if (this.form.itemType) d.val.itemType = this.form.itemType;
          // console.log(this.$cp(d));
          this.getData(d);
          this.searchShow = false;
        } else {
          return false;
        }
      });
    },
    getData(val) {
      const d = this.$cp(val);
      this.$axios.post("q.php", d).then(res => {
        if (res.data) {
          this.data = res.data.data;
          this.data.push({ ID: 0, name: "搜索全部内容" });
          this.bannerData = res.data.banner;
          // this.list = this.data.map(a => {
          //   return this.$del(a, ["data"]);
          // });
        }
        // console.log(123,val);
      });
    },
    handleSizeChange(newSize) {
      // 监听 每页显示数 改变事件
      // console.log('每页显示数被改变:'+newSize);
      this.pageSize = newSize;
      sessionStorage.setItem("pageSize", newSize);
      this.getData();
    },
    handleCurrentChange(newPage) {
      //监听 页码值 改变事件
      // console.log('当前页:'+newPage);
      this.currentPage = newPage;
      sessionStorage.setItem("currentPage", newPage);
      this.getData();
    }
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to);
    next();
  }
};
</script>

<style lang="less" scoped>
.aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  // line-height: 200px;
}
.info {
  position: absolute;
  bottom: 0px;
  z-index: 3;
  width: 100%;
  height: 60px;
}
.name {
  color: 000;
  background-color: #aecaeca4;
  font-weight: 600;
  font-size: 26px;
  overflow: hidden;
}
.price {
  color: red;
}
.main1 {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
}
.header,
.footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  width: 100%;
}
body > .el-container {
  margin-bottom: 40px;
}

.container:nth-child(5) .aside,
.container:nth-child(6) .aside {
  line-height: 260px;
}

.container:nth-child(7) .aside {
  line-height: 320px;
}
</style>
